<template>
  <div class="wap-container orderPay" id="container">
    <section class="top mt10 mr10 ml10 bgfff">
      <div class="top-title">
        费用清单
      </div>
      <div class="order-info">
        <ul class="pl15 pb15">
          <li v-for="item in serviceList" class="rowflex">
            <div class="info-item c666">{{item.serviceType}}</div>
            <div class="ml10">{{item.toll}}元</div>
          </li>
        </ul>
        <div class="sum c666">合计<span class="ml10 red">{{allToll}}</span><span class="c999">元</span></div>
      </div>
    </section>

    <section class="bottom_bar cfff " >
      <div class="buy-money">￥{{allToll}}元</div><div class="pay-bar" @click="payOrder()">确认</div>
    </section>

    <Loading :show="isShowLoading"></Loading>
  </div>
</template>

<script>
    import {Loading} from 'vux'
    export default {
      name: "OrderPay",
      components: {Loading},
      data() {
        return {
          orderId: '',
          serviceList: [],
          allToll: 0,
          isShowLoading: false
        }
      },
      methods: {
        payOrder: function () {
          this.$http.post('/work/api/workorder/pay/'+this.orderId+'/create').then(res=>{
              // this.$router.push({path: '/user/payMoney',query: {type: "pay"}})
            this.pay(res.data.data)
          }

          )
        },
        pay(orderId) {
            this.isShowLoading = true
            let that = this
            this.$register(["chooseWXPay"]).then(() => {
              this.$http.get("/wechat/pay/?order=" + orderId).then(res => {
                this.isShowLoading = false
                let config = res.data.data
                this.$wechat.chooseWXPay({
                  timestamp: config.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                  timeStamp: config.timeStamp,
                  nonceStr: config.nonceStr, // 支付签名随机串，不长于 32 位
                  package: config.packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）,
                  signType: config.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                  paySign: config.paySign, // 支付签名
                  success: function (res) {
                    // 支付成功后的回调函数
                    that.$router.push({path: "/user/myOrders"})
                  },
                  fail: function (res) {
                    that.$vux.alert.show({
                      title: '提示',
                      content: JSON.stringify(res)
                    })
                  },
                  complete: function (res) {
                    console.log(res)
                  },
                  cancel: function (res) {
                    //用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
                    that.$vux.alert.show({
                      title: '提示',
                      content: "您已取消操作"
                    })
                  }
                })
              })
            })

        }
      },
      mounted() {
        let id = this.$route.query.orderId
        console.log(this.$route.query.orderId)
        this.orderId = id
        let data={workOrderId: this.orderId, noPage: true, orderNumber: 'asc'}
        this.$http.get('/work/api/serviceitem/', {params: data}).then(res=>{
            for (var i = 0; i < res.data.data.length; i++){ //筛选未确认的服务项目
              if (res.data.data[i].status === 3) {
                this.serviceList.push(res.data.data[i])
                this.allToll += res.data.data[i].toll
              }
            }
          }
        )
      }
    }
</script>

<style lang="less">
  .orderPay {
    font-size: 0.13rem;
    padding-bottom: 0.6rem;

    .top, .bottom {
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
    }

    .top-title, .project-title {
      padding-top: 0.08rem;
      height: 0.43rem;
      line-height: 0.35rem;
      font-size: 0.15rem;
      text-align: center;
      border-bottom: solid 1px #ebebeb;
    }

    .order-info {
      font-size: 0.15rem;
      border-bottom: solid 1px #ebebeb;
    }

    .order-info ul {
      border-bottom: solid 1px #eee;
    }

    .order-info ul li {
      margin-top: 0.15rem;
      line-height: 0.15rem;
      height: 0.15rem;
      display: flex;
      justify-content: space-between;
      padding-right: 0.1rem;
    }

    .order-info .info-item {
    }

    .sum {
      height: 0.43rem;
      line-height: 0.43rem;
      padding-left: 0.15rem;
    }

    .bottom_bar {
      display: flex;
      width: 100%;
      background: #fff;
      line-height: 0.43rem;
      text-align: center;
      justify-content: flex-end;
    }

    .buy-money {
      color: #f95b5b;
    }

    .pay-bar {
      width: 1.3rem;
      margin-left: 0.45rem;
      background-color: #42a3fd;
      font-size: 0.15rem;
    }
  }
</style>
